<template>
	<view class="detailContainer">
		<view class="title">
			<view class="titleMain">
				<view class="titleBack" @click="back">
					<image class="titleBackImg" src="../../static/images/tabBar/goback.png"></image>
				</view>
				<view class="titleShow">{{spuList.name}}</view>
			</view>		
			
			<view class="nav">
				<view class="navList"  @click="goskip">
						<view class="navItem" :class="{active:SkipSite === 'skipGoods'}" data-name="skipGoods">商品</view>
						<view class="navItem" :class="{active:SkipSite === 'skipPinlun'}" data-name="skipPinlun">评论</view>
						<view class="navItem" :class="{active:SkipSite === 'skipDetail'}" data-name="skipDetail">详情</view>
						<view class="navItem" :class="{active:SkipSite === 'skipTuijian'}" data-name="skipTuijian">推荐</view>
				</view>
			</view>
			
		<scroll-view scroll-y="false" @scroll="changeScrool" :scroll-top="scrollTop" scroll-with-animation enable-flex="true" :scroll-into-view="SkipSite"  class="main">
			<!-- 轮播 -->
				<swiper class="swipperMain" indicator-dots="true" autoplay  id="skipGoods">
					<swiper-item class="swipperMainItem" v-for="(sku,index) in skuList.shop_info.ali_images" :key="index">
						<image class="swipperMainImg" :src="sku"></image>
					</swiper-item>
				</swiper>
				<!-- 内容介绍 -->
				<view class="content">
					<view class="contentDetail">
						<view class="contentPrice">￥{{ abs(skuList.price*100)}}</view>
						<view class="contentDiscount">满88包邮</view>
					</view>
					<view class="contentTile">{{skuList.shop_info.sku_mobile_title}}</view>
					<view class="contentIntroduce">{{skuList.shop_info.sku_mobile_sub_title}}</view>
				</view>
				
				<!-- 已选版本 -->
				<view class="contentbanben">
					<view class="contentbanbenTitle">已选版本</view>
						<view class="contentDetail">
							<view class="contentDetailLeft">
								<view class="contentAttribute" :key="attr.spec_id" v-for="(attr,index) in skuList.attr_info">{{attr.spec_name}}: <view>{{attr.value}}</view></view>
								<view class="contentAttribute">数量: <view>1</view></view>
							</view>
							
							<view class="contentDetailFlag">
								<image src="../../static/images/pageShow/youjiantou.png"></image>
							</view>
					</view>
				</view>
				
				<!-- 服务说明 -->
				<view class="contentshuoming">
					<view class="contentshuomingTitle">服务说明</view>
					<view class="contentDetail">
						<view class="contentSales">
							<view style="width: 40upx; 
							height:40upx;background: url('../../static/images/pageShow/7tiantuihuan.png') no-repeat;
							background-size: cover; 
							background-position: 6upx; 
							margin-right:6upx">
							</view>
							 7 天无理由退货
							</view>
							
							<view class="contentSales">
								<view style="width:40upx; 
								height:40upx;background: url('../../static/images/pageShow/7tiantuihuan.png') no-repeat;
								background-size: cover;
								background-position: -36upx;
								margin-right:6upx">
								</view>
									<view style="width: 240upx;">15 天质量问题换货</view>
								</view>
						
					</view>
				</view>
				
				<!-- 用户评价 -->
				<view class="contentshuoming" id="skipPinlun">
					<view class="contentshuomingTitle">用户评价({{previewTotal}})</view>
					<view class="contentshuomingMore">
						查看全部
						<view class="contentDetailFlag">
							<image src="../../static/images/pageShow/youjiantou.png"></image>
						</view>
					</view>
						
					<view class="contenDetailcurrent">
						<view class="contenUser">
							<view class="contenUserBox">
								<image class="contenUserImg" src="../../static/images/pageShow/touxiang.png"></image>
							</view>
							<view class="contenUserPhone">{{userPreview.phone}}</view>
							<view class="contenUserStart">
								<image class="contenUserStartImg" style="margin-right: 10upx;"  v-for="n in userPreview.star" :key="n" src="../../static/images/pageShow/xingxing.png"></image>
								</view>
						</view>
						
						<view class="contenCurrent">
							<view class="contenCurrentText">
								{{userPreview.content}}
							</view>
						</view>
					</view>
					
				</view>
				
				<!-- 商品详情 -->
				<view class="contentshuoming" id="skipDetail">
					<view class="contentshuomingTitle">商品详情</view>
					<view class="contentshuomingImage" 
					:key="spu.uid" 
					v-for="spu in spuList.shop_info.tpl_content.base.images.goods_view_mobile">
						<image mode="widthFix" class="contentshuomingImg" :src="spu.url"></image>
					</view>
				</view>
				
				<view class="contentshuoming" id="skipTuijian">
					<view class="indexTitle">相关推荐</view>
					<view class="goodsScrool">
								<view class="flowItemWaterfall">
									<view class="Waterfalllist" @click="changeDetail(more.skuId)" v-for="(more,index) in homeMoreList" v-if="index % 2 == 0" :key="index">
											<image class="waterfullImage" :src="more.images" ></image>
											<view class="waterfullText">{{more.skuName}}</view>
											<view class="waterfullPrice">${{more.discountPrice}}</view>
									</view>
								</view>
								
								<view class="flowItemWaterfall">
									<view class="Waterfalllist" @click="changeDetail(more.skuId)" v-for="(more,index) in homeMoreList" v-if="index % 2 == 1" :key="index">
											<image class="waterfullImage" :src="more.images"></image>
											<view class="waterfullText">{{more.skuName}}</view>
											<view class="waterfullPrice">${{more.discountPrice}}</view>
									</view>		
								</view>
					</view>
				</view>
				
				<!-- 会到顶部 -->
			<view class="toTop" :style="{opacity:topshow}" @tap="toTop"></view>
		</scroll-view>
		<view class="footer">
			<view class="footerImage" @click="kefu">
				<image class="footerImageIm" src="../../static/images/pageShow/erji.png"></image>
			</view>
			<view class="footerImage" @click="goShopCart">
				<image class="footerImageIm"  src="../../static/images/tabBar/cartwei.png"></image>
			</view>
			<view class="footerwarning" @click="goCenter">到货通知</view>
		</view>
		
			
		</view>
		
	</view>
</template>

<script>
	import store from "@/store/index.js"
	import {mapState} from "vuex"
	export default{
		name:"Deatils",
		data(){
			return{
				SkipSite:"skipGoods" ,// 需要定位过去的id
				scrollTop:-1,//设置滚动位置
				topshow:0,
			}
		},
		computed:{
			...mapState("details",["spuList","skuList","userPreview","previewTotal"]),
			...mapState("home",["homeMoreList"]),
		},
		methods:{
			getspuList(ids){
				store.dispatch("details/getspuList",ids)
			},
			getskuList(ids){
				store.dispatch("details/getskuList",ids)
			},
			getuserPreview(ids){
				store.dispatch("details/getuserPreview",ids)
			},
			//金额转换 分->元 保留2位小数 并每隔3位用逗号分开 1,234.56
			abs(val){
					var str = (val/100).toFixed(2) + '';
					var intSum = str.substring(0,str.indexOf(".")).replace( /\B(?=(?:\d{3})+$)/g, ',' );//取到整数部分
					var dot = str.substring(str.length,str.indexOf("."))//取到小数部分搜索
					var ret = intSum + dot;
					return ret;
			},
			// 返回上一页
			back(){
				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					})
				}else{//判定没有上一页得情况下,才进行跳转到指定界面
					uni.switchTab({
						url: '/pages/index/index',
					})
				}
			},
			// 锚点跳转
			goskip( event ) {
							console.log( '进入跳锚点' )
							console.log(event)
							console.log( event.target.dataset.name)
							this.SkipSite = event.target.dataset.name
			},
			// 更多数据获取
			getHomeMoreList(){
				let page  = this.page
				let pageSize  = this.pageSize
				store.dispatch("home/getHomeMoreList",{page,pageSize})
			},
			// 去详情页
			changeDetail(link){
				// console.log(link.split("/item/")[1])
				let res;
				if(typeof(link) === 'number'){
					res = link
				}else{
					res = link.split("/item/")[1]
				}
				if(res){
					uni.redirectTo({
						url:"/pages/deatils/details?ids=" + res
					})
				}
			},
			changeScrool(e){ //搜索栏
				if(e.detail.scrollTop < 30){
					this.changeFixed = true
				}else{
					this.changeFixed = false
				}
				if(e.detail.scrollTop < 800){
					this.topshow = 0
					this.scrollTop = -1//不改变只能一次1
				}else{
					this.topshow = 1
				}
			},
			// 去顶部
			toTop(e){
				this.$nextTick(function() {
									this.scrollTop = 0
									duration: 300
								});
			},
			// 去购物车
			goShopCart(){
				uni.reLaunch({
					url: '/pages/cart/cart'
				});
			},
			//客服
			kefu(){
				uni.showModal({
					title:"人工客服",
					content:"客服上班时间早上6:00到早上6:01",
					showCancel:false
				})
			},
			//通知
			goCenter(){
				uni.reLaunch({
					url: '/pages/center/center'
				});
			}
		},
		onLoad(option){
			let res = option.ids
			let result = res.substring(0,7)
			this.getspuList(result)
			this.getskuList(option.ids)
			this.getuserPreview(result)
			this.getHomeMoreList()
		}
		// mounted() {
		// 	this.getspuList()
		// 	this.getskuList()
		// 	this.getuserPreview()
		// }
	}
</script>

<style lang="stylus">
	.detailContainer
		height: calc(100vh)
		position: relative
		.title
			position: relative
			.titleMain
				position: fixed
				top: 0
				width: 100%
				border-bottom: 2upx solid #f0f0f0;
				height: 100upx
				display: flex
				align-items: center
				justify-content: center
				background-color: white
				z-index: 999
				.titleBack
					position: absolute;
					top: 50%
					left: 20upx
					transform: translateY(-50%);
					.titleBackImg
						width: 40upx;
						height: 40upx;
						left: 28upx;
				.titleShow
						position: fixed;
						display: flex
						justify-content: center
						color: rgba(0,0,0,.6);
						font-weight: 700;
						font-size: 36upx;
			.nav
				position: fixed;
				top: 100upx
				width: 100%
				height: 60upx
				padding: 20upx 0
				background-color: white
				border-bottom: 2upx solid #f0f0f0;
				z-index: 999
				.navList
					display: flex
					align-items: center
					justify-content:center
					width: 100%
					font-size: 28upx;
					font-weight: 700;
					box-sizing: border-box;
					.navItem
						flex: 0 0 0.25
						width: 176upx
						line-height: 60upx
						border: 2upx solid #f0f0f0;
						text-align: center
						color: #606060;
						border-radius: 4upx
						&.active
							background: #bfbfbf;
							background-image: linear-gradient(#aeaeae,#b3b3b3);
							box-shadow: inset 0 1upx -1upx rgb(0 0 0 / .15);
							color: #fff;
						// &::after
						// 	content: ""
		.main
			position: relative
			top:210upx
			// height: calc(100vh-210upx)
			height: 100vh
			.swipperMain
				height: 600upx
				width: 100%
				.swipperMainItem
					display: flex
					align-items: center
					justify-content: center
					width: 600upx
					height: 600upx
					.swipperMainImg
						width: 600upx
						height: 600upx
			.content
				border-top: 10upx solid #e7e7e7
				border-bottom: 10upx solid #e7e7e7	
				height: 240upx
				padding: 30upx
				box-sizing: border-box
				.contentDetail
					display: flex
					align-items: center
					justify-content: space-between
					.contentPrice
						color: #d44d44;
						font-weight: 700;
					.contentDiscount
						font-size: 26upx
						color: #999
				.contentTile
					font-size: 36upx
					font-weight: 700;
					color: #333;
					margin: 10upx 0
				.contentIntroduce
					color: #999
					font-size: 28upx
			// 已选版本
			.contentbanben
				border-top: 10upx solid #e7e7e7
				border-bottom: 10upx solid #e7e7e7	
				// height: 240upx
				padding: 30upx
				box-sizing: border-box		
				.contentbanbenTitle
					font-size: 26upx
					color: #999
				.contentDetail
					display: flex
					justify-content: space-between
					align-items: center
					.contentDetailLeft
						font-size: 28upx
						.contentAttribute
							margin: 10upx 0
							display: flex
							font-size: 26upx
							view
								font-weight: 700
					.contentDetailFlag
						position: relative
						top: -30upx
						right:20upx
						image
							width: 20upx
							height: 20upx
			// 服务说明和用户评价
			.contentshuoming
				border-top: 10upx solid #e7e7e7
				border-bottom: 10upx solid #e7e7e7	
				// height: 240upx
				box-sizing: border-box	
				position: relative
				.contentshuomingTitle
					padding: 20upx 30upx
					font-size: 32upx
					font-weight: 700
					color: #6f6f6f
					border-bottom: 2upx solid #e7e7e7
				.contentshuomingImage
					display: flex
					flex-direction: column
					flex:1
					align-items: center
					justify-content: center
					width: 100%
					height: 100%
					.contentshuomingImg
						width: 100%
				.contentDetail
					padding: 40upx 30upx
					display: flex
					font-size: 20upx
					font-weight: 500upx
					.contentSales
						margin-right: 20upx
						background-color: white
						display: flex
						flex: 1
						align-items: center
						width: 200upx
						font-weight: 600
				// 用户评价-查看更多
				.contentshuomingMore	
					position: absolute
					right: 40px;
					top: 20upx;
					font-size: 26upx
					color: #999
					.contentDetailFlag
						position: absolute
						top: 0rpx;
						right: -30rpx;
						image
							width: 20upx
							height: 20upx
				.contenDetailcurrent
					padding: 20upx 20upx
					.contenUser
						display: flex
						align-items: center
						flex: 0
						width: 100%
						.contenUserBox
							width: 90upx
							height: 76upx
							border-radius: 50%
							.contenUserImg
								width: 68upx
								height: 68upx
								border-radius: 50%
						.contenUserPhone
							width: 160upx
							font-size: 24upx
						.contenUserStart
							width: 20upx
							height: 20upx
							display: flex
							flex: 1
							.contenUserStartImg
								width: 20upx
								height: 20upx
				.contenCurrent
					padding: 10upx
					.contenCurrentText
						font-size: 25upx
						-webkit-line-clamp: 2
						-webkit-box-orient: vertical
						display: -webkit-box
						overflow: hidden
				//加载更多
				.goodsScrool
					display: flex
					padding: 20upx
					.flowItemWaterfall
						width: 50%;
						.Waterfalllist
							background-color: #fafafa
							margin: 10upx
							border-radius: 20upx
							position: relative
							&::after
								content: "";
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								background: rgba(0,0,0,.02)
							.waterfullImage
								width: 377.5upx
								height: 377.5upx
							.waterfullText
								font-size: 28upx
								color: rgba(0,0,0,.7);
								margin: 0.1rem 0
								padding: 0 0.6rem
								font-weight: 700;
							.waterfullPrice
								display: flex;
								flex-wrap: wrap;
								padding: 0 0.6rem;
								font-family: Arial;
								font-weight: 600;
								color: #d44d44;
								line-height: 40upx;
								font-size: 28upx;
								margin-bottom: 10upx 
			.toTop
				width: 80upx;
				height: 80upx;
				position: fixed;
				right: 30upx;
				bottom: 3.3rem;
				background: #fff;
				border: 0.8px solid rgba(0,0,0,.1);		
				box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,.06);
				border-radius: 0.3rem;
				transition: all .25s cubic-bezier(.215,.61,.355,1);
				scroll-behavior: smooth;
				z-index: 30;
				&::before
					content: "^";
					font-family: SmartisanIconFont;
					font-size: .9rem;
					color: rgba(0,0,0,.4);
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%,-50%);
					transform: translate(-50%,-50%);				
		.footer
			position: fixed
			bottom: 0
			width: 100%
			border-bottom: 2upx solid #f0f0f0;
			height: 100upx
			display: flex
			align-items: center
			justify-content: space-around
			background-color: white
			padding: 20upx
			box-sizing: border-box
			z-index: 999
			.footerImage
				width: 70upx
				height: 70upx
				.footerImageIm
					width: 70upx
					height: 70upx
			.footerwarning
				width: 70%
				height: 110%
				font-size: 30upx
				font-weight: 700;
				text-align: center
				line-height: 60upx
				color: #fff;
				border-radius: 10upx
				background-color: #ffd633;
</style>